<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
<div class="bg-white min-h-[1024px]">
<div class="flex h-screen">
<!-- 左侧导航 -->
<div class="w-[119px] bg-white flex flex-col">
<div class="p-6 text-center">
<div class="font-['Pacifico'] text-2xl text-primary tracking-wider">AI Chat</div>
</div>
<div class="px-4 py-4 flex flex-col items-center text-center">
<div class="w-16 h-16 bg-gradient-to-r from-primary to-secondary rounded-full flex items-center justify-center text-white shadow-lg mb-3">
<span class="text-2xl font-semibold">M</span>
</div>
<div class="text-base font-medium tracking-wide">默默</div>
<div class="text-sm text-gray-600 flex items-center mt-1">
<i class="fas fa-crown text-yellow-400 mr-1"></i>
<span class="font-medium">VIP会员</span>
</div>
</div>
<nav class="flex-1 px-3 py-6">
<div class="space-y-2">
<a href="#" class="flex flex-col items-center px-4 py-3 text-gray-700 rounded-xl hover:bg-gray-50 transition-colors">
<i class="fas fa-history w-5 h-5 flex items-center justify-center text-primary mb-1"></i>
<span class="font-medium text-sm tracking-wide">历史记录</span>
</a>
<a href="#" class="flex flex-col items-center px-4 py-3 text-gray-700 rounded-xl hover:bg-gray-50 transition-colors">
<i class="fas fa-star w-5 h-5 flex items-center justify-center mb-1"></i>
<span class="font-medium text-sm tracking-wide">收藏夹</span>
</a>
<a href="#" class="flex flex-col items-center px-4 py-3 text-gray-700 rounded-xl hover:bg-gray-50 transition-colors">
<i class="fas fa-cog w-5 h-5 flex items-center justify-center mb-1"></i>
<span class="font-medium text-sm tracking-wide">设置</span>
</a>
</div>
</nav>
</div>
<!-- 右侧内容 -->
<div class="flex-1 flex bg-white">
<!-- 历史对话区 -->
<div class="w-[195px] overflow-y-auto">
<div class="p-4">
<div class="font-medium text-base mb-4">历史对话</div>
<div class="space-y-3">
<div class="p-3 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100">
<div class="text-sm font-medium mb-1">关于神经网络的研究</div>
<div class="text-xs text-gray-500">2025-09-02 14:30</div>
</div>
<div class="p-3 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100">
<div class="text-sm font-medium mb-1">前端跨域解决方案</div>
<div class="text-xs text-gray-500">2025-09-02 11:20</div>
</div>
<div class="p-3 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100">
<div class="text-sm font-medium mb-1">AI在医疗领域的应用</div>
<div class="text-xs text-gray-500">2025-09-01 16:45</div>
</div>
</div>
</div>
</div>
<!-- 主内容区 -->
<div class="flex-1 flex flex-col p-6" style="width: 64%;">
<!-- 顶部导航 -->
<div class="h-16 flex items-center justify-center px-8 bg-gradient-to-r from-white via-gray-50 to-white rounded-xl shadow-sm border border-gray-100 mx-auto" style="width: 64%;">
<nav class="flex items-center space-x-10">
<a href="#" class="text-primary font-medium relative group">
  <span class="relative z-10">最新推荐</span>
  <span class="absolute inset-x-0 -bottom-1 h-[3px] bg-primary/90 rounded-full transform origin-left transition-all duration-300 ease-out"></span>
</a>
<a href="#" class="text-gray-600 hover:text-gray-900 font-medium relative group">
  <span class="relative z-10">Agents</span>
  <span class="absolute inset-x-0 -bottom-1 h-[3px] bg-primary/90 rounded-full transform scale-x-0 origin-left transition-all duration-300 ease-out group-hover:scale-x-100"></span>
</a>
<a href="#" class="text-gray-600 hover:text-gray-900 font-medium relative group">
  <span class="relative z-10">联网搜索组</span>
  <span class="absolute inset-x-0 -bottom-1 h-[3px] bg-primary/90 rounded-full transform scale-x-0 origin-left transition-all duration-300 ease-out group-hover:scale-x-100"></span>
</a>
<a href="#" class="text-gray-600 hover:text-gray-900 font-medium relative group">
  <span class="relative z-10">写作组</span>
  <span class="absolute inset-x-0 -bottom-1 h-[3px] bg-primary/90 rounded-full transform scale-x-0 origin-left transition-all duration-300 ease-out group-hover:scale-x-100"></span>
</a>
<a href="#" class="text-gray-600 hover:text-gray-900 font-medium relative group">
  <span class="relative z-10">编程组</span>
  <span class="absolute inset-x-0 -bottom-1 h-[3px] bg-primary/90 rounded-full transform scale-x-0 origin-left transition-all duration-300 ease-out group-hover:scale-x-100"></span>
</a>
<a href="#" class="text-gray-600 hover:text-gray-900 font-medium relative group">
  <span class="relative z-10">绘画组</span>
  <span class="absolute inset-x-0 -bottom-1 h-[3px] bg-primary/90 rounded-full transform scale-x-0 origin-left transition-all duration-300 ease-out group-hover:scale-x-100"></span>
</a>
</nav>
</div>
<!-- 主要内容区 -->
<div class="flex-1 overflow-auto p-6">
<!-- AI模型卡片网格 -->
<div class="grid grid-cols-auto-fit gap-4 mb-8 mx-auto" style="width: 64%;">
<template v-for="(model, index) in [
{ name: 'GPT-5-Agent', icon: 'robot', color: 'blue', status: '新版本' },
{ name: 'Claude-4.1', icon: 'brain', color: 'purple', status: '推荐' },
{ name: 'Gemini-2.5', icon: 'sparkles', color: 'green', status: '高级版' },
{ name: 'DeepSeek', icon: 'wand-magic-sparkles', color: 'orange', status: 'Beta' },
{ name: 'DALL·E 3', icon: 'image', color: 'pink', status: '创意' },
{ name: 'Midjourney', icon: 'palette', color: 'indigo', status: '艺术' },
{ name: 'Stable XL', icon: 'camera', color: 'yellow', status: '专业' },
{ name: 'CodeLlama', icon: 'code', color: 'red', status: '编程' },
{ name: 'PaLM-2', icon: 'lightbulb', color: 'green', status: '智能' },
{ name: 'LLaMA-3', icon: 'star', color: 'blue', status: '高效' },
{ name: 'Anthropic-2', icon: 'user-robot', color: 'purple', status: '对话' },
{ name: 'Falcon-180B', icon: 'bolt', color: 'orange', status: '速度' },
{ name: 'BLOOM', icon: 'seedling', color: 'green', status: '成长' },
{ name: 'Mistral-8x7B', icon: 'wind', color: 'blue', status: '轻量' },
{ name: 'Yi-34B', icon: 'atom', color: 'indigo', status: '创新' },
{ name: 'Qwen-72B', icon: 'cloud', color: 'purple', status: '云端' },
{ name: 'ChatGLM-4', icon: 'comments', color: 'pink', status: '多语言' }
]" :key="index">
<div class="bg-white p-2.5 rounded-xl border border-gray-200 hover:border-primary/30 hover:shadow-md transition-all cursor-pointer">
<div class="flex items-start space-x-2">
<div :class="`w-6 h-6 rounded-lg bg-${model.color}-100 flex items-center justify-center flex-shrink-0`">
<i :class="`fas fa-${model.icon} text-${model.color}-600 text-sm`"></i>
</div>
<div class="flex-1 min-w-0">
<div class="font-medium text-sm">{{ model.name }}</div>
<div class="text-xs text-gray-500 mt-1 break-words">{{ model.status }}</div>
</div>
</div>
</div>
</template>
</div>
<!-- 对话区域 -->
<div class="mt-auto bg-white rounded-2xl border border-gray-200 p-6" style="width: 64%; margin-left: auto; margin-right: auto;">
<!-- 输入框 -->
<div class="relative">
<textarea class="w-full border-none bg-gray-50/70 rounded-2xl pl-6 pr-32 py-5 resize-none focus:ring-2 focus:ring-primary focus:outline-none text-base" rows="3" placeholder="请输入问题（提示：输入后可快速生成AI回答，支持截图粘贴、图片/文件上传）"></textarea>
<div class="absolute right-4 bottom-4 flex items-center space-x-2">
<button class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 hover:bg-gray-300">
<i class="fas fa-microphone"></i>
</button>
<button class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 hover:bg-gray-300">
<i class="fas fa-paperclip"></i>
</button>
<button class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center hover:bg-primary/90">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
</script>
<style scoped>
.grid-cols-auto-fit {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
</style>